import React from "react";
import "./index.scss";
import { Button, Form, Input, message } from "antd";
import { UserSwitchOutlined, LockOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { checkLogin } from "../../api/account";
export default function index() {
  const navigate = useNavigate();
  const [messageApi, contextHolder] = message.useMessage();

  // 点击登录按钮
  const onFinish = async (values) => {
    console.log("Success:", values);

    let res = await checkLogin(values);
    let { code, msg } = res.data;
    if (code == 0) {
      let { id, role, token } = res.data;
      // 将用户数据 存储到本地==其他页面可以通过本地获取出来使用
      localStorage.setItem("user", JSON.stringify({ id, role, token }));

      // 跳转首页
      navigate("/home");
    } else {
      messageApi.open({
        type: "success",
        content: msg,
      });
    }

    // 请求数据
    // 跳转到 首页
    // navigate('/home')
  };

  return (
    <div className="bg">
      <div className="login">
        <Form name="basic" onFinish={onFinish}>
          <Form.Item
            name="account"
            rules={[
              {
                required: true,
                message: "请输入您的账号",
              },
            ]}
          >
            <Input placeholder="请输入账号" prefix={<UserSwitchOutlined />} />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: "请输入您的密码",
              },
            ]}
          >
            <Input.Password
              prefix={<LockOutlined />}
              placeholder="请输入密码"
            />
          </Form.Item>

          <Form.Item>
            <Button block type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
